import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio, Space, Tabs } from 'antd';
import "./two.css"
import Fenye from '../fenye/fenye';
import Computer from '../computers/computers';
import img1 from "../../../public/img1.png"
type TabPosition = 'left' | 'right' | 'top' | 'bottom';
type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
function Hometwo() {
    const [tabPosition, setTabPosition] = useState<TabPosition>('left');
    const changeTabPosition = (e: RadioChangeEvent) => {
        setTabPosition(e.target.value);
    };

    const [size, setSize] = useState<SizeType>('small');
    const [item, setItem] = useState([
        {
            key: '1',
            label: `纯分流功能`,
            children: <Fenye />,
        },
        {
            key: '2',
            label: `分流加计算功能`,
            children: <Computer />,
        }
    ]);
    const [items, setItems] = useState([
        {
            key: '1',
            label: `园区UPF`,
            children: <Tabs
                tabBarGutter={200}
                defaultActiveKey="1"
                centered
                type='card'
                items={item}
            />
        },
        {
            key: '2',
            label: `地市共享UPF`,
            children: <img src={img1} alt="" className='my_img1' />,
        },
    ]);
    return (
        <div className='my_hometwo'>
                <Tabs className='my_tabs'
                    centered
                    type="card"
                    defaultActiveKey="1"
                    tabBarGutter={100}
                    tabPosition={tabPosition}
                    items={items}
                />
        </div>
    )
}
export default Hometwo
